<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<%@	taglib prefix="c"			uri="http://java.sun.com/jsp/jstl/core"%>
<%@	taglib prefix="fmt"		uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@	taglib prefix="fn"		uri="http://java.sun.com/jsp/jstl/functions"%>
<title>중고마트</title>
</head>
<body>
<section id="account" data-role="page">
    <header data-role="header" data-position="fixed">
    <a href="index.do" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
    	<h1 style="text-overflow:clip;margin-left:10%;margin-right:10%">회원가입</h1>
    </header>
    
    <c:choose>
    	<c:when test="${ code == -3 }"><c:set var="message" value="*해당 아이디는 이미 사용 중 입니다."/></c:when>
    	<c:when test="${ code == -4 }"><c:set var="message" value="*해당 단말로 등록된 사용자가 있습니다."/></c:when>
    	<c:otherwise><c:set var="message" value=""/></c:otherwise>
    </c:choose>
    <form id="accountForm" name="accountForm" method="post" data-ajax="false" action="account.do">
    <div data-role="content">
        <input type="email" name="userid" id="userid" value="${user.userid}" placeholder="이메일" data-clear-btn="true"/>
        <p id="emailCaution" class="caution"></p>
        <input type="password" name="password" id="password" value="" placeholder="비밀번호" data-clear-btn="true"/>
        <p id="passwordCaution" class="caution"></p>
        <input type="password" name="passwordAgain" id="passwordAgain" value="" placeholder="비밀번호 확인" data-clear-btn="true"/>
        <p id="passwordAgainCaution" class="caution"></p>
        <input type="text" name="mobile" id="mobile" value="${user.mobile}" placeholder="전화번호(선택)" data-clear-btn="true"/>
        <p id="message">${message}</p>
        <input type="hidden" id="device_id" name="device_id" value="">
        <input type="hidden" id="rid" name="rid" value="">
    </div>
    <div data-role="content">
        <input class="show-page-loading-msg" type="submit" formnovalidate id="submit" value="확인" data-inline="false" data-icon="check">
    </div>
    </form>
    <footer data-role="footer" data-position="fixed">
    	<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a href="products.do" data-icon="grid" rel="external">전체 상품</a></li>
				<li><a href="myProducts.do" data-icon="bars" rel="external">내 상품</a></li>
				<li><a href="myFavorites.do" data-icon="star" rel="external">내 관심상품</a></li>
			</ul>
		</div><!-- /navbar -->
    </footer>
</section>
</body>
<style type="text/css">
.caution {
    color: red;
}
</style>
<script>
function Enum() {}
Enum.AuthResult = { SUCCESS : 0, INVALID_USER : -1, INVALID_PASSWORD : -2, EXIST_USER : -3, EXIST_DEVICE_ID : -4 };

$(document).bind('pageinit', function() {
	invisibleCaution();
	
	$('#accountForm').submit(function() {
		visibleMessage(false);
		if ( !validateForm() ) {
			return false;
		}
		
		callNativeMethod();
		return true;
	});
});

function callNativeMethod() {
	var deviceId = getDeviceId();
	var registrationId = getRegistrationId();
	$('#device_id').val(deviceId);
	$('#rid').val(registrationId);
}

function getDeviceId() {
	return window.jungo.getDeviceId();
}

function getRegistrationId() {
	return window.jungo.getRegistrationId();
}

function invisibleCaution() {
	$('.caution').hide();
}

function visibleEmailCaution(visible) {
	if ( !visible ) {
		$('#emailCaution').hide();
	} else {
		$('#emailCaution').show();
	}
}

function visiblePasswordCaution(visible) {
	if ( !visible ) {
		$('#passwordCaution').hide();
	} else {
		$('#passwordCaution').show();
	}
}

function visiblePasswordAgainCaution(visible) {
	if ( !visible ) {
		$('#passwordAgainCaution').hide();
	} else {
		$('#passwordAgainCaution').show();
	}
}

function visibleMessage(visible) {
	if ( !visible ) {
		$('#message').hide();
	} else {
		$('#message').show();
	}
}

function validateEmail(email) { 
    var rex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return rex.test($.trim(email));
}

function validateForm() {
	var validation = true;
	visibleEmailCaution(false);
	visiblePasswordCaution(false);
	visiblePasswordAgainCaution(false);
	
	if ( !validateEmail($('#userid').val()) ) {
		$('#emailCaution').text("*이메일을 올바르게 입력해 주세요.");
		visibleEmailCaution(true);
		validation = false;
	} 
	if ( $.trim($('#password').val()) == "" ) {
		$('#passwordCaution').text("*패스워드를 정확히 입력해 주세요.");
		visiblePasswordCaution(true);
		validation = false;
	} 
	if ( validation ) {
		var password = $.trim($('#password').val());
		var passwordAgain = $.trim($('#passwordAgain').val());
		if ( password != passwordAgain ) {
			$('#passwordAgain').val('');
			$('#passwordAgainCaution').text("*패스워드가 일치하지 않습니다.");
			visiblePasswordAgainCaution(true);
			validation = false;
		} 
	}
	return validation;
}

</script>
</html>